<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .img {
            display: inline-block;
            width: 100px;
            height: 40px;
            line-height: 40px;
            text-align: center;
        }
        /* 晃动动画 */
        
        @keyframes shake {
            from {
                transform: translate3d(0, 0px, 0px);
            }
            10% {
                transform: translate3d(6px, -6px, 0px);
            }
            20% {
                transform: translate3d(-5px, 5px, 0px);
            }
            30% {
                transform: translate3d(4px, -4px, 0px);
            }
            35% {
                transform: translate3d(-3px, 3px, 0px);
            }
            39% {
                transform: translate3d(2px, -2px, 0px);
            }
            41% {
                transform: translate3d(-1px, 1px, 0px);
            }
            42% {
                transform: translate3d(0px, 0px, 0px) rotate(20deg);
            }
            52% {
                transform: rotate(-15deg);
            }
            60% {
                transform: rotate(8deg);
            }
            65% {
                transform: rotate(-3deg);
            }
            67% {
                transform: rotate(1deg);
            }
            70% {
                transform: rotate(0deg);
            }
            to {
                transform: translate3d(0px, 0px, 0px) rotate(0);
            }
        }
        
        .shake {
            animation: shake 0.8s ease-in-out;
        }
    </style>
</head>

<body>

    <span class="img   shake ">12313</span>
</body>

</html>